<template>
  <div id="mine">
    <div class="background">
      <div class="header">
        <img src="../../assets/pyimg/zu1.png" alt="" />
        <p class="title">一只兔子</p>
        <div class="zhuye"><p>个人主页</p></div>
      </div>
      <div class="center">
        <van-button type="primary" class="tu1">会员中心</van-button>
        <van-button type="primary" class="tu2">积分商城</van-button>
        <van-button type="primary" class="tu">积分商城</van-button>
      </div>
      <van-badge :content="count" class="tou">
        <div class="child">收藏</div>
      </van-badge>
      <van-badge :content="26" class="tou">
        <div class="child">足迹</div>
      </van-badge>
      <van-badge :content="8" class="tou">
        <div class="child">足迹</div>
      </van-badge>
      <van-badge :content="666" class="tou">
        <div class="child">积分</div>
      </van-badge>
      <van-grid class="paylist">
        <van-grid-item icon="notes-o" text="全部订单" />
        <van-grid-item icon="paid" text="待付款" />
        <van-grid-item icon="sign" text="未出行" />
        <van-grid-item icon="other-pay" text="待点评" />
      </van-grid>
    </div>
    <div class="pai">
      <img src="../../assets/pyimg/tupian.png" alt="" @click="goCamera" />
    </div>
    <div class="gongju">
      我的工具
      <div class="box">
        <div class="message">我的信息</div>
        <div class="trip">我的旅游</div>
      </div>
    </div>
  </div>
</template>

<script>
import { useRouter, useRoute } from "vue-router";
import { NavBar, Button, Badge, Grid, GridItem } from "vant";
import { ref } from "vue";
export default {
  components: {
    [NavBar.name]: NavBar,
    [Button.name]: Button,
    [Badge.name]: Badge,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
  },
  name: "Mine",
  setup() {
    const router = useRouter();
    const route = useRoute();
    //引入仓库
    let count = ref(localStorage.getItem("count"));
    //跳转到相机页面
    const goCamera = function () {
      router.push("/Camera");
    };
    return {
      router,
      route,
      goCamera,
      count,
    };
  },
};
</script>
<style lang="less" scoped>
#mine {
  width: 414px;
  position: relative;
  /deep/.background {
    height: 680px;
    background-color: #f1fdff;
  }
  /deep/.header {
    width: 414px;
    position: relative;
    img {
      width: 75px;
      height: 73px;
      padding-left: 16.5px;
      padding-top: 20px;
    }
    .title {
      position: absolute;
      top: 10px;
      display: inline-block;
      padding-left: 20px;
      font-size: 16px;
      font-weight: 600;
    }
    .zhuye {
      position: absolute;
      width: 60px;
      height: 30px;
      border-radius: 25px;
      background-color: skyblue;
      right: 15px;
      top: 70px;
      p {
        font-size: 10px;
        text-align: center;
        margin-top: 8px;
      }
    }
  }
  .center {
    width: 414px;
    margin-top: 40px;
    height: 80px;
    /deep/ .tu {
      width: 110px;
      height: 50px;
      margin-right: 20px;
    }
    /deep/.tu1 {
      width: 110px;
      height: 50px;
      margin-left: 20px;
    }
    /deep/.tu2 {
      width: 110px;
      height: 50px;
      margin-right: 20px;
      margin-left: 18px;
    }
  }
  .tou {
    margin-top: 20px;
  }
  .child {
    font-size: 16px;
    font-weight: 600;
    margin: 5px 30px;
  }
  /deep/.paylist {
    width: 414px;
    margin-top: 10px;
  }
  .pai {
    margin-top: 20px;
    position: absolute;
    top: 350px;
    width: 370px;
    margin-left: 30px;
    img {
      width: 370px;
      height: 100px;
      border-radius: 5px;
    }
  }
  .gongju {
    position: absolute;
    top: 445px;
    margin-top: 30px;
    margin-left: 20px;
    font-size: 18px;
    font-weight: 600;
    .box {
      display: flex;
      justify-content: space-around;
      .message {
        width: 150px;
        background-color: green;
        border-radius: 25px;
        text-align: center;
        font-size: 18px;
        font-weight: 600;
        margin-top: 5px;
        margin-left: 18px;
      }
      .trip {
        width: 150px;
        background-color: skyblue;
        border-radius: 15px;
        text-align: center;
        font-size: 18px;
        font-weight: 600;
        margin-top: 5px;
        margin-left: 18px;
      }
    }
  }
}
</style>
